在開始說明前，可以先參考關於Bootstrap 5的文件，可以參考這裡
另外可參考六角學院翻譯的中文版本
由於中文版本是翻譯的版本，可能會有些微的版本落差或尚未翻譯的文件。

Bootstrap 5的RWD響應式網頁斷點

昨天簡單介紹了Bootstrap 5 RWD響應式網頁的隱藏與顯示，今天要來介紹RWD響應式網頁的排版。所謂RWD的排版，就是在不同螢幕的寬度下，可以調整每一個欄位寬度的呈現。Bootstrap 5的斷點可以參考以下幾個視窗寬度的size，可以分別在這些寬度設定斷點：
Size|xs|sm|md|lg|xl|xxl
------------- | -------------
寬度|＜576px|≧576px|≧768px|≧992px|≧1200px|≧1400px

資料來源：https://getbootstrap.com/docs/5.2/layout/grid/

RWD 排版範例

相關HTM撰寫範例可以參考以下語法(記得要載入Bootstrap 5的框架)：

<div class="container text-primary">
  <div class="row">
    <div class="col col-sm-6 col-md-6 col-lg-4 col-xl-1 text-center bg-dark">1</div>
    <div class="col col-sm-2 col-md-6 col-lg-4 col-xl-11 text-center bg-warning ">2</div>
    <div class="col col-sm-6 col-md-6 col-lg-4 col-xl-2 text-center bg-info ">3</div>
    <div class="col col-sm-3 col-md-6 col-lg-4 col-xl-10 text-center bg-danger ">4</div>
    <div class="col col-sm-6 col-md-6 col-lg-4 col-xl-3 text-center bg-dark">5</div>
    <div class="col col-sm-4 col-md-6 col-lg-4 col-xl-9 text-center bg-warning ">6</div>
    <div class="col col-sm-6 col-md-6 col-lg-4 col-xl-4 text-center bg-info ">7</div>
    <div class="col col-sm-5 col-md-6 col-lg-4 col-xl-8 text-center bg-danger">8</div>
  </div>
</div>

可以將視窗從很小的寬度拉到最寬，觀察會有什麼變化。在最小寬度的狀態，第1至8格都會在同一行；當視窗寬度來到576px(sm)時，第一格會佔第一行的6欄(50%)，第二格會佔第一行的2欄，由於第三格佔6欄，已經超出第一行可容納的空間，會換到第二行，佔6欄寬度，第四格佔第二行的3欄。以此類推，從視窗寬度最小拉到最大，排版除了原始狀態外會有4次變化，再搭配昨日所學的隱藏與顯示，可以在網頁排版玩出許多不同的花樣了，相關變化會在後續分別呈現與說明。

網頁寬度小於576px

當網頁寬度未滿576px時，由於該網頁並未設置寬度，因此會平均分成八格，可參照下圖。

網頁寬度大於等於576px未滿768px

當網頁寬度大於等於576px未滿768px時，就是RWD為sm的範疇，可以看到第一、三、五、七格佔六欄，雙數格分別佔二、三、四、五欄，可參考下圖的呈現方式。

網頁寬度大於等於768px未滿992px

當網頁寬度大於等於768px未滿992px時，就是RWD為md的範疇，每一欄都佔六欄，也就是每一行各有兩格，可參考下圖的呈現方式。

網頁寬度大於等於992px未滿1200px

當網頁寬度大於等於992px未滿1200px時，就是RWD為lg的範疇，每一欄都佔4欄，也就是每一行各有三格，可參考下圖的呈現方式。

網頁寬度大於等於1200px

當網頁寬度大於1200px時，就是RWD為xl的範疇，每兩格加起來為十二，最終呈現四行，可參考下圖的呈現方式。

範例參考

以下範例為今天說明內容的實作頁面，包含前述所有案例的演示，請參考：
https://codepen.io/hamagawa76/pen/mdxvJRY

是不是很簡單！明天會說明CSS響應式網頁排版部分了，我們明天見囉！